<template>
	<view>

		<!-- 内容开始区域 -->
		<tm-fullView>
			<template v-slot:default="{info}">
				<tm-sheet :margin="[0,0]" :padding="[0,0]" :round="0">

					<tm-row>
						<tm-col :grid="2">
							<view class="py-10 red ">
								<tm-button theme="indigo" size="s">创建画布</tm-button>

								<tm-button theme="indigo" size="s" @click="addText">文字</tm-button>
								<tm-button theme="indigo" size="s">贴纸</tm-button>
								<tm-button theme="indigo" size="s">图片</tm-button>

							</view>
						</tm-col>

						<tm-col :grid="10">
							<view class="py-10   ">我是画布

								 <canvas id="canvas"></canvas>

							</view>
						</tm-col>
					</tm-row>



				</tm-sheet>



			</template>
		</tm-fullView>
		<!-- 底部导航 -->
		<tm-bottomnavigation icon-color="red" :list="list_1"></tm-bottomnavigation>
	</view>

</template>

<script>
 
	

 
	export default {

		data() {
			return {
				canvas:'',
				list_1: [{
						iconSize: 46,
						icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/elf-freebie-icon.png',
						value: '标题'
					},
					{
						iconSize: 46,
						icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/house-snowglobe-freebie-icon.png',
						value: '标题'
					},
					{
						iconSize: 46,
						icon: 'icon-plus',
						value: '标题',
						custom: true,
						customFontColor: 'white',
						path: '/subpages/com/bottomnavigation'
					},
					{
						iconSize: 46,
						icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/christmas-tree-freebie-icon.png',
						value: '标题'
					},
					{
						iconSize: 46,
						icon: 'https://cdn.roundicons.com/wp-content/uploads/2016/12/tree-freebie-icon.png',
						value: '标题'
					}
				],

			}
		},
		
		methods: {
		  
 

			addText() {
				 
				console.log("456465")
				this.canvas = new fabric.Canvas('canvas',
					{
				        width: '1080', //画布宽度
				        height: '1920', //画布高度
				        backgroundColor: '#000000', //画布默认背景颜色
				    });
			}
		},
	 
	 
	};
</script>

 